/**
 * 学习目标：使用props通信-函数式组件
 * 步骤：
 * 1. 创建一个函数式组件
 * 2. 发送数据：在父组件中给子组件设置标签属性
 * 3. 接收数据：在子组件中使用props形参，来接收数据
 */
import React from 'react';
import ReactDOM from 'react-dom';

// 1.创建一个函数式组件
// 注意：props是一个对象，代表是父组件传来的标签属性集合，可以使用解构方式来获取属性
function Child({ name, msg }) {
  // 3. 在子组件中使用props形参，来接收数据
  console.log(name, msg, 'props');
  return (
    <div>
      <h1>
        我是子组件：我接收到了... {name} -- {msg}
      </h1>
    </div>
  );
}

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 2. 在父组件中给子组件设置标签属性 */}
        {/* 注意：React中可以只设置props，不使用。不需要先在子组件定义 */}
        <Child name="张三" msg="狂徒"></Child>
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
